<template>
  <div class="container">
    <subject-table
      xxx-xx="123"
      title="helloVue"
      :list="list"
      @delByIndex="delByIndexFn"
    ></subject-table>
    <subject-t-able :list="list" @delByIndex="delByIndexFn"></subject-t-able>
    <!-- 2.2 父组件内， 通过@xxx接收自定义事件 -->
    <add-form @submit="onSubmit"></add-form>
  </div>
</template>

<script>
/*
  学习目标：缓存功能
 
*/
import AddForm from "./components/AddForm.vue";
import SubjectTAble from "./components/SubjectTable.vue";

export default {
  components: { SubjectTAble, AddForm },
  name: "App",
  data() {
    return {
      // 2. 从缓存中取出初始值
      list: JSON.parse(localStorage.getItem("vue-86-list")) || [],
    };
  },
  methods: {
    delByIndexFn(index) {
      console.log("index  ----->  ", index);
      this.list.splice(index, 1);
    },
    onSubmit(subject, score) {
      const newItem = {
        subject,
        score,
        id: Date.now(),
        time: new Date(),
      };
      this.list.push(newItem);
    },
  },
  // 1. 深度监听数据， 存到缓存中
  watch: {
    list: {
      deep: true,
      handler() {
        localStorage.setItem("vue-86-list", JSON.stringify(this.list));
      },
    },
  },
};
</script>

<style scoped></style>
